1 00:00:00,600 --> 00:00:02,950 Hello and welcome to this lecture. 2 00:00:03,150 --> 00:00:14,130 In this lecture or we are going to create a function for the contact form that war enable someone to 3 00:00:14,280 --> 00:00:19,920 enter the details and also submit the details on the form. 4 00:00:20,010 --> 00:00:26,150 It will then save it to the local storage on the local machine. 5 00:00:29,950 --> 00:00:32,150 So this is what the farm looks like at the moment. 6 00:00:32,150 --> 00:00:38,750 At the moment it's not very functional so we can see typing details in here. 7 00:00:38,910 --> 00:00:42,220 Send that body tool not go way. 8 00:00:42,370 --> 00:00:51,880 So in this lecture we're going to implement local storage before we begin we are to have a script. 9 00:00:51,880 --> 00:01:00,110 Let me just open up the index case to a male file and just highlight something for you. 10 00:01:00,140 --> 00:01:06,350 We created the class for me just good through that. 11 00:01:06,400 --> 00:01:12,730 So we have a class here called stored stort. 12 00:01:13,070 --> 00:01:21,830 And about Tash that class two or the labels like the name feel the email field and the message fill 13 00:01:21,910 --> 00:01:24,110 divorce class taught. 14 00:01:24,130 --> 00:01:34,450 So what this will be the this war allowed the form elements to be stored so any where you have the class 15 00:01:34,450 --> 00:01:46,390 stored you use the data submitted to that will be stored in use in this stored class. 16 00:01:46,420 --> 00:01:53,600 So what I am going to do here in this lecture or like previous ones is just to save time again is explained 17 00:01:53,600 --> 00:01:57,760 the code as I copy chunks of the code in. 18 00:01:57,940 --> 00:02:00,230 So we're going to we're going could be using. 19 00:02:00,250 --> 00:02:04,600 Query Jake Query is a javascript library. 20 00:02:04,600 --> 00:02:12,370 We've already got a reference to the library via the go see the in which is a content delivery network 21 00:02:12,640 --> 00:02:14,980 so there's no need to install it. 22 00:02:15,070 --> 00:02:19,860 So the first thing I am pasting here is this code here. 23 00:02:20,040 --> 00:02:27,290 Any way you see the dollar sign know that you are referencing a query library. 24 00:02:27,310 --> 00:02:30,000 So basically what this does. 25 00:02:30,040 --> 00:02:39,270 This code here and this document here is what's passed into the code and the ready method. 26 00:02:39,280 --> 00:02:48,270 What that does it checks Joe query checks to make sure that the web page is fully loaded before record 27 00:02:48,440 --> 00:02:49,340 executes. 28 00:02:49,490 --> 00:02:56,950 It doesn't want the code to execute prematurely so that this is used to check that he looks out fully 29 00:02:56,950 --> 00:03:05,470 paid and make sure that the content of the page is loaded fully before it notifies jaquie to inject 30 00:03:05,530 --> 00:03:07,810 the code or to use the code. 31 00:03:07,900 --> 00:03:12,990 So before any javascript is javascript code is executed. 32 00:03:13,190 --> 00:03:22,550 This here I want is used to check that the document is ready so that the code does not execute too early. 33 00:03:22,600 --> 00:03:29,770 I have pasted some coding from line to 2 line 14. 34 00:03:29,980 --> 00:03:33,870 So I'll just explain what's going on here. 35 00:03:34,330 --> 00:03:42,760 Okay so basically what's happening here is that a function called it in it is a function the function 36 00:03:42,760 --> 00:03:47,430 code in it is run when the page is first loaded. 37 00:03:47,440 --> 00:03:48,890 So what this function does. 38 00:03:48,910 --> 00:03:54,870 It checks to see if any data is stored for each of the field. 39 00:03:55,170 --> 00:04:01,750 And if there is data it and the data to the relevant form element 40 00:04:03,990 --> 00:04:06,250 so so you can see here. 41 00:04:06,280 --> 00:04:07,480 This is what it does. 42 00:04:07,480 --> 00:04:10,330 So this is any time between this column. 43 00:04:10,420 --> 00:04:12,570 This is a main calling process here. 44 00:04:12,760 --> 00:04:17,530 So this is it and this is when the image function is called. 45 00:04:17,560 --> 00:04:19,490 So to call this function here. 46 00:04:19,600 --> 00:04:21,820 This is what is the house specified. 47 00:04:21,970 --> 00:04:27,800 He just write the name of the function followed by parentheses and it will call the function. 48 00:04:27,820 --> 00:04:31,990 So I've said here like 3 that if k. 49 00:04:32,020 --> 00:04:33,540 If the local storage. 50 00:04:33,550 --> 00:04:43,210 Name three is the name that has been entered by someone if the name is there's something there. 51 00:04:43,330 --> 00:04:46,090 Here the dollar sign here is a joke query. 52 00:04:46,100 --> 00:04:49,370 Inside here is Heidi. 53 00:04:49,480 --> 00:04:56,620 So it looks for these selectorial here this select or Heidi code name and it evaluates it. 54 00:04:56,890 --> 00:05:03,870 If there is a matching date if there's anything entered it will put it inside local storage on that 55 00:05:04,000 --> 00:05:04,780 title. 56 00:05:04,870 --> 00:05:07,200 Name the same thing here. 57 00:05:07,420 --> 00:05:13,930 If it searches for this Heidi email it to evaluate it and put it in local storage. 58 00:05:14,020 --> 00:05:15,980 That is Title email. 59 00:05:16,060 --> 00:05:21,860 So for example if you've got several emails typed in this is an arena where you see square brackets 60 00:05:22,360 --> 00:05:27,680 you are referring to an array so these are harrie's square brackets. 61 00:05:27,830 --> 00:05:32,070 Is it they can contain more than one value. 62 00:05:32,360 --> 00:05:33,790 Okay. 63 00:05:34,580 --> 00:05:42,770 In the same process here he checks if there's any message in this him this. 64 00:05:42,860 --> 00:05:53,030 Heidi here quod message if there is a valid set policy into a local storage on the key or label message. 65 00:05:53,070 --> 00:05:58,700 Right so that's basically how this inmate function works. 66 00:06:08,030 --> 00:06:10,770 So the function is defined online too. 67 00:06:10,900 --> 00:06:15,750 And it is called on line for teaching. 68 00:06:16,810 --> 00:06:17,490 Okay. 69 00:06:17,490 --> 00:06:23,820 So I've said on the code in from line 16 to 19. 70 00:06:24,310 --> 00:06:28,510 Basically what this code is code is doing here. 71 00:06:29,160 --> 00:06:41,100 So what's happening here is that the this code here this chain this does this here is the class that 72 00:06:41,250 --> 00:06:43,930 is attached to each of the labels. 73 00:06:44,040 --> 00:06:48,170 The message they like the message the email and the name. 74 00:06:48,180 --> 00:06:51,280 This class has the query here. 75 00:06:51,300 --> 00:06:56,000 Inside there is the Selecter. 76 00:06:56,340 --> 00:07:04,010 So this function here what the change is is a change event full function. 77 00:07:04,020 --> 00:07:11,730 Basically what that does the change event only occurs when the value of an element has been changed. 78 00:07:11,740 --> 00:07:18,810 It usually works with inputs text area select and so on usually with form elements. 79 00:07:18,810 --> 00:07:23,140 This is used so looks out for a change in event. 80 00:07:23,280 --> 00:07:26,760 So what does it all check if there's any change. 81 00:07:26,760 --> 00:07:33,000 The function will then add the date that has been imported in to local storage 82 00:07:35,400 --> 00:07:36,360 here. 83 00:07:36,450 --> 00:07:39,480 This allows and then this. 84 00:07:39,690 --> 00:07:42,920 What this is this is really is this select. 85 00:07:42,930 --> 00:07:45,010 It is his view references. 86 00:07:45,270 --> 00:07:53,880 The quadrent hastier elements where you see these use is reference to the current amount limit. 87 00:07:53,940 --> 00:07:57,030 So this is dot and then this is the attribute. 88 00:07:57,030 --> 00:07:59,880 This is the name all right. 89 00:08:00,060 --> 00:08:05,610 So basically what's happening here is the level of function here the function checks to see if there's 90 00:08:05,610 --> 00:08:11,390 any change and then pops the change into all local storage. 91 00:08:12,330 --> 00:08:14,280 Okay so we're done now. 92 00:08:14,290 --> 00:08:18,730 You just need to save always save your work. 93 00:08:18,840 --> 00:08:19,990 Click save. 94 00:08:20,090 --> 00:08:27,820 Hall then lunch the form and see and then. 95 00:08:27,830 --> 00:08:36,000 Now we should be able to type some pin in your case so you of what we type have just typed in a name 96 00:08:36,010 --> 00:08:42,060 here James Bond email James double of 7 and this is a message. 97 00:08:42,070 --> 00:08:44,250 So in effect 6. 98 00:08:45,570 --> 00:08:49,590 Okay and this and then I click reset. 99 00:08:49,860 --> 00:08:54,590 I go to the browser now just to F 12. 100 00:08:55,750 --> 00:08:59,080 Okay so the form has been submitted. 101 00:08:59,310 --> 00:09:03,010 These are the contents so this was what was typed in for the email. 102 00:09:03,240 --> 00:09:12,240 James had double or seven dot com and the message had said where is a party hat and the name was James 103 00:09:12,240 --> 00:09:24,230 Bond So it has saved what I typed in the form into local storage so that's it for this project. 104 00:09:24,580 --> 00:09:32,850 Creating a contact form local storage please feel free to contact me if you have any issues at all. 105 00:09:33,060 --> 00:09:36,190 Be more than happy to help Michael. 106 00:09:36,240 --> 00:09:38,520 You know you are not overwhelmed by it all. 107 00:09:38,550 --> 00:09:40,320 Feel free to contact me. 108 00:09:40,320 --> 00:09:47,300 I really would love to help take care of the best and I hope it has been useful. 109 00:09:47,310 --> 00:09:49,190 Bye for now.